<script lang="ts" setup>
import simpleBtn from '@/components/btns/simpleBtn.vue';

const props = defineProps({
  domain: {
    type: Object,
    default: () => ({id: 0, platform: '', state: '', domain: '', target: '', sld: ''})
  }
})

const emits = defineEmits(['clicked'])
const clicked = (type: string) => {
  emits('clicked', type,props.domain.id)
}
</script>

<template>
  <view class="card">
    <view class="card-title">
      <text class="title">{{ props.domain.platform }}</text>
    </view>
    <view class="card-content">
      <view class="term">
        <text class="label">完整域名:</text>
        <text class="value">{{ props.domain.domain }}</text>
      </view>
      <view class="term">
        <text class="label">二级域名:</text>
        <text class="value">{{ props.domain.sld }}</text>
      </view>
      <view class="term">
        <text class="label">跳转地址:</text>
        <text class="value">{{ props.domain.target }}</text>
      </view>
      <view class="term">
        <text class="label">域名状态:</text>
        <text class="value">
          <uv-tags text="正常"  size="mini" type="warning" v-if="props.domain.state === 1"></uv-tags>
          <uv-tags text="禁用"  size="mini" type="error" v-else></uv-tags>
        </text>
      </view>
      <view class="term">
        <text class="label">创建时间:</text>
        <text class="value">{{ props.domain.create_time }}</text>
      </view>
    </view>
    <view class="card-footer">
      <simpleBtn text="修改" type="edit" class="simpleBtn" @clickType="clicked"></simpleBtn>
      <simpleBtn text="删除" type="del" class="simpleBtn" @clickType="clicked"></simpleBtn>
    </view>
  </view>
</template>


<style scoped lang="scss">
@import "@/styles/minxi.scss";

.card {
  border-radius: 10px;
  background-color: #fff;
  margin: 8px 10px;
  padding: 13px;

  .card-title {
    padding: 10rpx 0;
    .title {
      @include text-style(36rpx, #333, 500) ;
    }
  }

  .card-content {
    display: flex;
    flex-direction: column;

    .term {
      margin: 14rpx 0;
      display: flex;
      .label {
        @include text-style(30rpx, #333, 500);
      }

      .value {
        @include text-style(27rpx, #666, 400);
      }
    }
  }

  .card-footer {
    display: flex;
    padding: 10rpx 0;
    //border-top: 0.64rpx solid #E6E6E6;
    justify-content: flex-end;

    .simpleBtn {
      margin-left: 48rpx;
    }
  }
}
</style>